<template>
	<view class="page-container">
  
	  <!-- 编辑区域 -->
	  <view class="edit-content">
		<!-- 头像编辑 -->
		<view class="avatar-section" @tap="chooseAvatar">
		  <image 
			class="avatar" 
			:src="userInfo.avatar" 
			mode="aspectFill"
		  ></image>
		  <view class="edit-icon">
			<image src="/static/icons/edit.png" mode="aspectFit"></image>
		  </view>
		</view>
  
		<!-- 表单区域 -->
		<view class="form-section">
		  <!-- 昵称 -->
		  <view class="form-item">
			<text class="label">昵称</text>
			<input 
			  class="input" 
			  v-model="userInfo.nickname" 
			  placeholder="请输入昵称"
			/>
		  </view>
  
		  <!-- 性别 -->
		  <view class="form-item">
			<text class="label">性别</text>
			<picker 
			  class="picker" 
			  :range="genderOptions" 
			  @change="onGenderChange"
			>
			  <view class="picker-text">
				{{ userInfo.gender === 0 ? '未知' : userInfo.gender === 1?'男':'女' }}
				<text class="arrow">></text>
			  </view>
			</picker>
		  </view>
  
		  <!-- 个人介绍 -->
		  <view class="form-item">
			<text class="label">简介</text>
			<input 
			  class="input" 
			  v-model="userInfo.description" 
			  placeholder="可以说说你的职业或者爱好"
			/>
		  </view>
		</view>
  
		<!-- 保存按钮 -->
		<view class="save-btn" @tap="saveProfile">
		  保存
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  import { userApi } from '../../api/user'
  import defaultAvatar from '../../static/images/Ellipse 9.png'
  
  export default {
	data() {
	  return {
		statusBarHeight: 20,
		userInfo: {
		  avatar: defaultAvatar,
		  nickname: '',
		  gender: 1, // 1-男 2-女
		  description: '',
		  phone: ''
		},
		genderOptions: ['男', '女']
	  }
	},
	onLoad() {
	  this.getStatusBarHeight()
	  this.getUserInfo()
	},
	methods: {
	  getStatusBarHeight() {
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
	  },
	  goBack() {
		uni.navigateBack()
	  },
	  async getUserInfo() {
		try {
		  const res = await userApi.getUserInfo()
		  if (res.code === 200) {
			this.userInfo = {
			  avatar: res.data.avatar || defaultAvatar,
			  nickname: res.data.name || '',
			  gender: res.data.gender || 0,
			  description: res.data.description || '',
			  phone: res.data.phone || ''
			}
		  } else {
			uni.showToast({
			  title: res.message || '获取用户信息失败',
			  icon: 'none'
			})
		  }
		} catch (error) {
		  console.error('获取用户信息失败：', error)
		  uni.showToast({
			title: '获取用户信息失败',
			icon: 'none'
		  })
		}
	  },
	  chooseAvatar() {
		uni.chooseImage({
		  count: 1,
		  sizeType: ['compressed'],
		  sourceType: ['album', 'camera'],
		  success: (res) => {
			this.userInfo.avatar = res.tempFilePaths[0]
			// 这里可以实现头像上传逻辑
			this.uploadAvatar(res.tempFilePaths[0])
		  }
		})
	  },
	  async uploadAvatar(filePath) {
		try {
		  uni.showLoading({ title: '上传中...' })
		  // 实现头像上传逻辑
		  // const res = await uploadFile(filePath)
		  // this.userInfo.avatar = res.url
		  uni.hideLoading()
		} catch (error) {
		  uni.hideLoading()
		  uni.showToast({
			title: '头像上传失败',
			icon: 'none'
		  })
		}
	  },
	  onGenderChange(e) {
		const index = e.detail.value
		console.log(index);
		
		this.userInfo.gender = Number(index) + 1
		console.log(this.userInfo.gender);
		
	  },
	  async saveProfile() {
		try {
		  if (!this.userInfo.nickname.trim()) {
			return uni.showToast({
			  title: '请输入昵称',
			  icon: 'none'
			})
		  }
  
		  uni.showLoading({
			title: '保存中...'
		  })
  
		  // 调用更新用户信息接口
		  const res = await userApi.updateUserInfo({
			name: this.userInfo.nickname,
			gender: this.userInfo.gender,
			description: this.userInfo.description,
			avatar: this.userInfo.avatar
		  })
  
		  uni.hideLoading()
  
		  if (res.code === 200) {
			uni.showToast({
			  title: '保存成功',
			  icon: 'success'
			})
			setTimeout(() => {
			  uni.navigateBack()
			}, 1500)
		  } else {
			uni.showToast({
			  title: res.message || '保存失败',
			  icon: 'none'
			})
		  }
		} catch (error) {
		  uni.hideLoading()
		  uni.showToast({
			title: '保存失败',
			icon: 'none'
		  })
		}
	  }
	}
  }
  </script>
  
  <style scoped>
  .page-container {
	min-height: 100vh;
	background-color: #fff;
  }
  
  .status-bar {
	background-color: #fff;
  }
  
  .nav-bar {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #eee;
  }
  
  .left {
	padding: 20rpx;
  }
  
  .back-icon {
	font-size: 40rpx;
  }
  
  .title {
	font-size: 32rpx;
	font-weight: 500;
  }
  
  .right image {
	width: 44rpx;
	height: 44rpx;
  }
  
  .edit-content {
	padding: 40rpx 30rpx;
  }
  
  .avatar-section {
	display: flex;
	justify-content: center;
	position: relative;
	margin-bottom: 60rpx;
  }
  
  .avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 80rpx;
  }
  
  .edit-icon {
	position: absolute;
	right: 260rpx;
	bottom: 0;
	width: 40rpx;
	height: 40rpx;
	background-color: #8a2be2;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .edit-icon image {
	width: 24rpx;
	height: 24rpx;
  }
  
  .form-section {
	margin-bottom: 60rpx;
  }
  
  .form-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
  }
  
  .label {
	width: 120rpx;
	font-size: 28rpx;
	color: #333;
  }
  
  .input {
	flex: 1;
	font-size: 28rpx;
  }
  
  .picker {
	flex: 1;
  }
  
  .picker-text {
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  
  .arrow {
	color: #999;
	font-size: 24rpx;
  }
  
  .save-btn {
	height: 88rpx;
	background-color: #8a2be2;
	color: #fff;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
  }
  
  .save-btn:active {
	opacity: 0.8;
  }
  </style>